<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/bootstrap.min.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/style.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index2.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/utils.css">

    <title>yeqian-blog</title>
    <style>
        [v-cloak] {
            display: none
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-pagination {
            text-align: right;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="content-header" style="  padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;
">
        <el-breadcrumb>
            <div class="toPage">
                <a href="main-table.html">
                    <h class="a-recovery" style="    right: -180px;
    position: relative;"><b>个人中心</b>
                    </h>
                </a>
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="container-fluid  dashboard-content" id="border">
                <div class="row">
                    <!-- metric -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body" style=" background: #d9ecff">
                                <h5 class="text-muted">文章总数</h5>
                                <div class="metric-value d-inline-block">
                                    <h1 class="mb-1 text-primary">{{totalData.totalAll}}</h1>
                                </div>
                               <!-- <div class="metric-label d-inline-block float-right text-success">
                                    <i class="fa fa-fw fa-caret-up"></i><span>今日文章数量+5.27%</span>
                                </div>-->
                            </div>
                            <div id="sparkline-1"></div>
                        </div>
                    </div>
                    <!-- metric -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body" style=" background: #d9ecff">
                                <h5 class="text-muted">总阅读量</h5>
                                <div class="metric-value d-inline-block">
                                    <h1 class="mb-1 text-primary">{{totalData.readCount}} </h1>
                                </div>
                              <!--  <div class="metric-label d-inline-block float-right text-success">
                                    <i class="fa fa-fw fa-caret-up"></i><span>今日阅读量+1.08%</span>
                                </div>-->
                            </div>
                            <div id="sparkline-2"></div>
                        </div>
                    </div>
                    <!-- metric -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body" style=" background: #d9ecff">
                                <h5 class="text-muted">评论数</h5>
                                <div class="metric-value d-inline-block">
                                    <h1 class="mb-1 text-primary">{{totalData.commentCount}}</h1>
                                </div>
                            <!--    <div class="metric-label d-inline-block float-right text-success">
                                    <i class="fa fa-fw fa-caret-up"></i><span>今日评论数+1.08%</span>
                                </div>-->
                            </div>
                            <div id="sparkline-3">
                            </div>
                        </div>
                    </div>
                    <!-- metric -->
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body" style=" background: #d9ecff">
                                <h5 class="text-muted">标签总数</h5>
                                <div class="metric-value d-inline-block">
                                    <h1 class="mb-1 text-primary">{{totalData.tagCount}} </h1>
                                </div>
                              <!--  <div class="metric-label d-inline-block float-right text-success">
                                    <i class="fa fa-fw fa-caret-up"></i><span>今日访客量+1.08%</span>
                                </div>-->
                            </div>
                            <div id="sparkline-4"></div>
                        </div>
                    </div>
                    <!-- /. metric -->
                </div>
                <div class="row">
                    <div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                            <h5 class="card-header">最近文章</h5>
                            <div class="card-body p-0">
                                <el-table
                                        :data="tableData"
                                        size="medium"
                                        style="width: 100%"
                                        :row-class-name="tableRowClassName">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            width="50">
                                    </el-table-column>
                                    <el-table-column
                                            label="封面图片"
                                            width="120">
                                        <template scope="scope">
                                            <img :src="scope.row.img" width="40" height="40" class="head_pic"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="title"
                                            label="文章标题"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            label="发布时间"
                                            prop="publishTime"
                                            :formatter="dateFormat">
                                    </el-table-column>

                                    <el-table-column
                                            prop="status"
                                            label="状态"
                                            width="70"
                                    >
                                        <template slot-scope="scope">
                                            <span v-html="stateFormat(scope.row.status)"></span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column
                                            prop="tags"
                                            width="180"
                                            label="标签">
                                        <template slot-scope="scope">
                                            <span class="el-tag el-tag--medium el-tag--light "
                                                  v-for="(u,i) in scope.row.tagNames">{{u}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="introduce"
                                            label="文章介绍">
                                    </el-table-column>
                                </el-table>
                                <div class="table-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                            <h5 class="card-header">数据统计</h5>
                            <div class="row">
                                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                <div id="chart1" style="height:220px;width: 324px;"></div>
                                <div id="chart3" style="height:220px;width: 324px;"></div>
                            </div>
                            <div id="chart2" style="height:220px;width: 648px;"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/echarts.min.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/eachars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {

            tableData: [],
            end: 6,
            start: 0,
            totalData: {
                totalAll: 652, //默认值，查询失败显示
                readCount: 565,
                commentCount: 666
            },
            statusCode: 1,//表示此页为回收站状态的博客 状态：0：发布，1：草稿,2:回收站
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: 222 //查询条件---用户id
            }
        },
        created() {

            axios.post("/admin").then((res) => {
                this.pagination.queryString = res.data.data.id;
                var _this = this;
                axios.get("/article/getTotalCount/" + this.pagination.queryString).then((res) => {
                    if (res.data.flag) {
                        _this.totalData.totalAll = res.data.data;
                        // console.log("发布状态的文章数为" + _this.totalData.totalAll);
                    }
                });
                axios.get("/article/getReadCount/" + this.pagination.queryString).then((res) => {
                    if (res.data.flag) {
                        _this.totalData.readCount = res.data.data;
                        //console.log("发布状态的文章数为" + _this.totalData.readCount);
                    }
                });
                axios.get("/comment/getCommentCount/" + this.pagination.queryString).then((res) => {
                    if (res.data.flag) {
                        _this.totalData.commentCount = res.data.data;
                    }
                });
                axios.get("/tag/getTagCount").then((res) => {
                    if (res.data.flag) {
                        _this.totalData.tagCount = res.data.data;
                        //console.log("发布状态的文章数为" + _this.totalData.readCount);
                    }
                });
                /**
                 * @PostMapping("/getRecentArticle/{author}/{start}/{end}")
                 * */

                axios.post("/article/getRecentArticle/" + this.pagination.queryString + "/" + this.start + "/" + this.end).then((res) => {
                    if (res.data.flag) {
                        var data = res.data.data;
                        //
                        _this.tableData = res.data.data;
                        //console.log("查询最近n条文章记录" + data[0].id);
                    }
                });
            })
        }, methods: {
            handleCurrentChange(currentPage) {

            }, tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }, dateFormat(row, column) {
                var date = new Date(row.publishTime)
                return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()

            }, stateFormat(row) {
                if (row === 0) {
                    // return '已发布'
                    return '<span style="color:#67C23A;">已发布</span>'
                } else if (row === 1) {
                    return '<span style="color:#909399;">草稿箱</span>'
                } else if (row === 2) {
                    return '<span style="color:#E6A23C;">回收站</span>'
                }
            }
        }
    });




    //折线图
    axios.post("/article/getLineReport").then((res) => {
        echarts.init(document.getElementById('chart3'), 'macarons').setOption({
            title: {
                text: '文章数量',
                left: 'center'
            },
            tooltip: {},
            /*legend: {
                data:['文章数量增长']
            },*/
            xAxis: {
                type: 'category',
                data: res.data.data.months
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '文章数量',
                data: res.data.data.articleCount,
                type: 'line'
            }]
        });
    });
    //柱状图
    axios.post("/comment/getHistogramReport").then((res) => {
        console.log(res.data.data)
        echarts.init(document.getElementById('chart2'), 'macarons').setOption({
            title: {
                text: '评论数量',
                left: 'center'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: res.data.data.months
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '文章数量增长',
                data: res.data.data.commentCount,
                type: 'line',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        });
    });
    //饼状图
    axios.post("/tag/getPieReport").then((res) => {

        echarts.init(document.getElementById('chart1'), 'macarons').setOption({
            title: {
                text: '文章标签',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '文章标签',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: res.data.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    })
</script>
</body>
</html>